<template>
  <div>
    <!-- 删除按钮，绑定点击事件，且附带两个参数，index是前端的索引，item.id是列表项的id -->
    <el-button type="primary" size="mini" @click="dellike(index, item.id)" round
      >删除</el-button
    >
    <div class="footer">
      <!-- 清空全部按钮，绑定事件clear -->
      <el-button
        class="footer"
        type="primary"
        style="font-size: 16px; font-family: '微软雅黑'; width: 100%"
        @click="clear"
        round
        >清空全部</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [],
      token: "",
    };
  },
  methods: {
    //清空全部
    clear() {
      //首先在前端快速让list变成空数组
      this.List = [];
      //请求后端数据库清空列表
      this.$axios({
        method: "get",
        url: "/job/clear",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authorization: "Bearer " + this.token,
        },
      })
        .then(res => {
          //请求成功后执行函数
          if (res.data.code === 0) {
            console.log("清空成功");
          } else {
            console.log("清空失败");
          }
        })
        .catch(err => {
          //请求错误后执行函
          console.log("请求错误");
        });
    },

    //单个item的删除
    dellike(index, e) {
      this.List.splice(index, 1); //'1' 获取item的前台索引值，从这个索引值开始删除，1代表删除一个
      //请求后端数据库删除item
      this.$axios({
        method: "get",
        url: "/job/remove",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authorization: "Bearer " + this.token,
        },
        params: {
          wid: e,
        },
      })
        .then(res => {
          //请求成功后执行函数
          if (res.data.code === 0) {
            console.log("删除成功");
          } else {
            console.log("删除失败");
          }
        })
        .catch(err => {
          //请求错误后执行函
          console.log("请求错误");
        });
    },
    //页面初始化时获取收藏列表
    getList() {
      this.$axios({
        method: "get",
        url: "/job/list",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authorization: "Bearer " + this.token,
        },
      })
        .then(res => {
          //请求成功后执行函数
          if (res.data.code === 0) {
            //定义从后端获取的joblist
            var res = res.data.data;
            this.List = res;

            console.log("获取成功");
          } else {
            console.log("获取失败");
          }
        })
        .catch(err => {
          //请求错误后执行函
          console.log("请求错误");
        });
    },
    //获取token
  },
  created() {
    this.token = localStorage.getItem("token");
  },
  mounted: function () {
    this.getList();
  },
};
</script>

<style lang="scss" scoped></style>
